<template>
  <!-- 担保物审批 -->
  <div id="box">
    <span>担保物审批</span>
    <div id="box2">
      <div class="box">
        <el-select v-model="value" placeholder="全部" size="large">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- 搜索框 -->
        <el-input
          v-model="input"
          class="w-50 m-2"
          placeholder="请输入要查询的担保物名称"
          :prefix-icon="Search"
        />
        <!-- 下拉菜单 -->
        <el-select v-model="value1" placeholder="类别" size="large" class="xl">
          <el-option
            v-for="item in leibie"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- 按钮 -->
        <el-button type="primary" class="but" @click="chaxun()">查询</el-button>
        <el-button type="primary" @click="chongzhi()">重置</el-button>
      </div>
      <!-- 表格 -->
      <div>
        <el-table :data="tableData">
          <el-table-column prop="dbwCollateralid" label="序号" />
          <el-table-column prop="dbwCollateralid" label="担保物编号" />
          <el-table-column prop="dbwCollateralname" label="担保物名称" />
          <el-table-column prop="dbwCollateraltype" label="担保物类别" />
          <el-table-column prop="dbwApprovalstatus" label="审批状态" />
          <el-table-column prop="dbwUpdatetime" label="更新时间" />
          <el-table-column prop="name" label="操作" class="caozuo">
            <span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="审批"
                placement="right"
              >
                <el-icon><Stamp id="stamp" @click="shenpi()" /></el-icon>
              </el-tooltip>
            </span>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fenye">
        <div class="demo-pagination-block">
          <span>共{{ totalnums }}条</span>
          <span
            ><el-button
              >5条/页<el-icon><CaretBottom /></el-icon></el-button
          ></span>
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            background
            layout="prev, pager, next"
            :total="totalnums"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <span>前往{{ currentPage4 }}页</span>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { dbwCollateral } from "../../apis/Sltapi/DanBao";
var input = ref();
var value = ref();
var value1 = ref();
var tableData = ref([]);
var router = useRouter();

/* 审批 */
const options = [
  {
    value: "Option1",
    label: "全部",
  },
  {
    value: "Option2",
    label: "待审批",
  },
  {
    value: "Option3",
    label: "已审批",
  },
];

/* 类别 */
const leibie = [
  {
    value: "leibie1",
    label: "全部",
  },
  {
    value: "leibie2",
    label: "保证金",
  },
  {
    value: "leibie3",
    label: "车辆",
  },
  {
    value: "leibie4",
    label: "法人担保",
  },
  {
    value: "leibie5",
    label: "房产",
  },
  {
    value: "leibie6",
    label: "存货",
  },
  {
    value: "leibie7",
    label: "土地",
  },
  {
    value: "leibie8",
    label: "自然人担保",
  },
  {
    value: "leibie9",
    label: "存单",
  },
  {
    value: "leibie10",
    label: "应收账款",
  },
  {
    value: "leibie11",
    label: "商票",
  },
  {
    value: "leibie12",
    label: "仓单",
  },
  {
    value: "leibie13",
    label: "其他",
  },
];

var totalnums = ref(22);
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(true);
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  return val;
};
onMounted(async () => {
  var res = await dbwCollateral();
  tableData.value = res.data.data;
});
// var shenpi = () => {
//   // router.push("/home/guarantee/A");
// };
/* 查询 */
let chaxun = async (value) => {
  var res = await dbwCollateral({ dbwCollateralname: input.value });
  tableData.value = res.data.data;
};
/* 重置 */
var chongzhi = async () => {
  var res = await dbwCollateral();
  tableData.value = res.data.data;
};
</script>
  
  <style scoped>
.xl {
  margin-left: 20px;
}
.el-select {
  width: 150px;
}
.el-icon {
  cursor: pointer;
}
#box {
  position: relative;
}
#box > span {
  display: block;
  width: 185px;
  height: 38px;
  background: #4eabfe;
  color: white;
  text-align: center;
  line-height: 38px;
  font-weight: 700;
  border-radius: 20px;
}
.box {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.el-input {
  margin-left: 20px;
  width: 300px;
}

.el-button {
  background: white;
  color: #b6b8be;
}
.el-button:hover {
  color: #4eabfe;
}
.but {
  background: #4eabfe;
  color: white;
  margin-left: 50px;
}

.dropdown {
  margin-left: 40px;
}
#box2 {
  background: #fafafa;
  height: 550px;
  padding: 20px;
}

.fenye {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 25%;
}

/* 分页 */
.contractb-bottom {
  /* border: 1px solid red; */
  width: 90%;
  margin-top: 200px;
  margin-left: 20px;
}
.scope {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  /* background-color: red; */
}
.demo-pagination-block {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
</style>